<!DOCTYPE html>
<html>
<head>
<title>新增供货商</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="http://assets.lp.alibaba.com/s/lpsp/base-min.css" rel="stylesheet" type="text/css" />
	<link href="http://assets.lp.alibaba.com/s/lplib/lpassert/css/lp-page-min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="../assets/grid.css" />	
	
<style>
	XMP{
		border:1px solid #ccc;
	}
</style>
</head>
<body>

   <form method="post" action="editSuccess.html" id="form">
	<div class="form-group">
		<h3 class="form-group-title">渠道设置：</h3>

		 <div id="grid">
			
		 </div>
		 <div id="gridError" class="form-line ks-clear ks-hidden">
			<label style="" class="valid-text">
				<span class="estate error">
					<em class="label">计划入库量不能为空！</em>
				</span>
			</label>

		 </div>
	 </div>
	<div class="form-group">
		<a class="form-button" href="javascript:void(0);">
			<button class="form-button-blue" type="submit" id="J_Submit">提交</button>
		</a>


		<a class="form-button" href="javascript:void(0);">
			<button class="form-button-blue" type="button" id="J_cancel">取消编辑</button>
		</a>

	  </div>
	<input id="channelInfo" type="hidden" name="chanelInfo">

   </form>
  
 <div class="form-group form-group-top-split">
		<h3 class="form-group-title form-group-split">功能：</h3>
		<div class="form-line ks-clear">
			<ul>
				<li>1.	编辑列表，添加、删除、修改 </li>
				<li>2.	文本编辑、数字编辑、下拉列表编辑、日期编辑、多选编辑 </li>
				<li>3.	错误验证</li>
				<li>4.	阻止某些单元格编辑</li>
			</ul>
		</div>
</div>

<div class="form-group form-group-top-split">
	<h3 class="form-group-title form-group-split">配置</h3>
	<div class="form-line ks-clear">
		<h4> DOM结构:</h4>
		<p>
		<XMP> 
			 <div id="grid">
		 </div>
		</XMP> 
		</p>
		
	</div>
	<div class="form-line ks-clear">
		<h4> JS配置:</h4>
		<XMP> 
			var store = new Grid.Store({ //数据缓冲类定义，不使用url
					autoLoad:false
				}),
				config = {
						renderTo:'grid',
						columns:[
							{ title: '渠道名称',width: 150, dataIndex: 'name',sortable:true,editor:{type:'text',editableFun : function(value,obj){
								if(obj.editable == true){
									return true;
								}
								return false;
							},validator:function(value,obj){
								if(!S.trim(value)){
									return '不能为空';
								}

								if(!repeatValidate(obj,records,value)){
									return '渠道名不能重复';
								}
								
							}}},
							{ title: '渠道类型',width: 150, dataIndex: 'type',editor:{type:'select',items : typeEnum},renderer:Grid.Util.Format.enumRenderer(typeEnum)},
							{ title : '创建时间',width:100,dataIndex : 'time',eidtor : {type : 'date'},renderer:Grid.Util.Format.dateRenderer()}},
							{ title: '操作',width: 100, dataIndex: 'isDelete',renderer:function(value){
								return '<span class="grid-command btn-del">删除</span>';
							}}
						],
						//showError:true,
						store:store,
						tbar:{buttons:[{id:'addchanel',text:'添加渠道',handler:addChanel,css:'bar-btn-add'}]}
					};

				var records = [{id:1,name:'渠道1',type:"1",time : 1218276186951,sale:["1","2"]},{id:2,name:'渠道2',type:"1",time : 1322460376800,editable:true},{id:3,name:'渠道2',type:"2",time : 1322460376800}],//直接渲染到页面的数据，也可以通过Store异步获取数据
					grid = new Grid.EditGrid(config);
				store.setResult(records);
			</XMP> 
		 </div>
	</div>
 </div>

  <div class="form-group form-group-top-split">
		<h3 class="form-group-title form-group-split">具体实现：</h3>
		<div class="form-line ks-clear">
			<ul>
				<li> 
					<h4>添加、删除、修改 </h4>
					<p>
						<XMP> 
			//添加渠道
			function addChanel(event){
				var record = {id : '',name : '',editable : true}; //生成新纪录
				store.add(record);									//添加记录
				grid.setCellToEdit(record,'name');					//将第一个单元格置为可编辑
			}

			//删除渠道
			function delChanel(data){
				grid.cancelEdit();  //删除前取消编辑状态
				store.remove(data);//删除记录
			}

			
						</XMP> 
					</p>
				</li>
				<li>
					<h4>文本编辑、数字编辑、下拉列表编辑、多选编辑</h4>
					<p>文本的编辑方式，由列的定义决定
					<XMP>
			//文本编辑
			{ title: '渠道类型',width: 150, dataIndex: 'type',editor:{type:'text'}}

			//数字编辑
			{ title: '渠道类型',width: 150, dataIndex: 'type',editor:{type:'number'}}

			//下拉列表编辑
			//需要制定下拉列表的各项 例如：{"1":"高级","2":"普通","3":"初级"}
			//renderer:将值转为文本显示
			{ title: '渠道类型',width: 150, dataIndex: 'type',editor:{type:'select',items : typeEnum},renderer:Grid.Util.Format.enumRenderer(typeEnum)}

			//日期编辑
			{ title : '创建时间',width:100,dataIndex : 'time',editor : {type : 'date',validator:function(value,obj){
				if(value > new Date().getTime())
				{
					return '日期不能大于当天';
				}
			}},renderer : Grid.Util.Format.dateRenderer},
					</XMP>
					</p>
				</li>
				<li><h4>错误验证</h4>
					<p>
						可以通过在列定义中的editor属性中配置 validator，是一个函数，返回值为字符串时，有错误，并显示错误提示
						<XMP>
			validator:function(value,obj){
				if(!S.trim(value)){
					return '不能为空';
				}

				if(!repeatValidate(obj,records,value)){
					return '渠道名不能重复';
				}
				
			}
						</XMP>
					<p>
				</li>
				<li><h4>阻止某些单元格编辑</h4>
					<p> 可以在列定义中的editor属性中配置editableFun，返回值为True时可以编辑，False时不可编辑，默认可以编辑
						<XMP>
			editableFun : function(value,obj){
				if(obj.editable == true){
					return true;
				}
				return false;
			}
						</XMP>
					</p>
				</li>
			</ul>
		</div>
</div>

   <script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
	<script>
	    KISSY.config({
			packages:[{
				name:"gallery",
				tag:"201112081542",
				path:"../../../../",
				charset:'utf-8'
			}]
		});
		KISSY.use('gallery/grid/1.0/',function(S,Grid){
			var nameFiled = "name",
				typeEnum = {"1":"高级","2":"普通","3":"初级"},//[{id:'',value:''},{}]
				saleEnum = {"1":"零售","2":"分销","3":"团购"},
				store = new Grid.Store({
					autoLoad:false
				}),
				records = [{id:1,name:'渠道1',type:"1",time : 1218276186951,sale:["1","2"]},{id:2,name:'渠道2',type:"1",time : 1322460376800,editable:true},{id:3,name:'渠道2',type:"2",time : 1322460376800}],
				config = {
					renderTo:'grid',
					columns:[
						{ title: '渠道名称',width: 150,sortable :true, dataIndex: 'name',editor:{type:'text',editableFun : function(value,obj){
							if(obj.editable == true){
								return true;
							}
							return false;
						},validator:function(value,obj){
							if(!S.trim(value)){
								return '不能为空';
							}

							if(!repeatValidate(obj,records,value)){
								return '渠道名不能重复';
							}
							
						}}},
						{ title: '渠道类型',width: 150, dataIndex: 'type',editor:{type:'select',items : typeEnum},renderer:Grid.Util.Format.enumRenderer(typeEnum)},
						{ title : '创建时间',width:100,dataIndex : 'time',editor : {type : 'date',validator:function(value,obj){
							if(value > new Date().getTime())
							{
								return '日期不能大于当天';
							}
						}},renderer : Grid.Util.Format.dateRenderer},
						{ title: '销售方式',width: 150, dataIndex: 'sale',editor:{type:'multipleSelect',items : saleEnum},renderer:Grid.Util.Format.multipleItemsRenderer(saleEnum)},
						{ title: '操作',width: 100, dataIndex: 'isDelete',renderer:function(value){
							return '<span class="grid-command btn-del">删除</span>';
						}}
					],
					//showError:true,
					store:store,
					tbar:{buttons:[{id:'addchanel',text:'添加渠道',handler:addChanel,css:'bar-btn-add'}]}
				};

			var grid = new Grid.EditGrid(config);
			store.setResult(records);
			
			//删除
			grid.on('cellclick',function(event){

				var sender = S.one(event.domTarget);
				if(sender.hasClass('btn-del')){
					grid.cancelEdit();
					delChanel(event.data);
				}
			});


			S.one('#J_cancel').on('click',function(){
				grid.cancelEdit();
			});

			//如果不能编辑，则阻止编辑
			/*grid.on('beforeedit',function(event){
				var field = event.field,
					data = event.data;
				if(field === 'name' && data.editable == false){
					return false;
				}
				return true;
			});*/

			//添加渠道
			function addChanel(event){
				var record = {id : '',name : '',editable : true};
				store.add(record);
				grid.setCellToEdit(record,'name');
			}
			//删除渠道
			function delChanel(data){
			
				store.remove(data);
			}
			//显示错误
			function showError(msg){
				var	textEl = S.one('.label','#gridError');
				textEl.text(msg);
				S.one('#gridError').show();

			}
			//清理错误
			function clearError(msg){
				var textEl = S.one('.label','#gridError');
				textEl.text('');
				S.one('#gridError').hide();
			}
			//验证非空
			function emptyValidate(records){
				var validate = true;
				S.each(records,function(record){
					if(!S.trim(record.name)){
						validate = false;
						return false;
					}
				});
				return validate;
			}
			//去重验证
			function repeatValidate(record,records,value){
				var validate = true;
				value = value || record[nameFiled];
				S.each(records,function(obj){
					if(obj != record && obj[nameFiled] == value){
						validate = false;
						return false;
					}
				});
				return validate;
			}
			//提交前验证
			S.one('#form').on('submit',function(event){
				var records = store.getResult(),
					validate = true;
				if(grid.hasError()){
					event.halt();
					return;
				}
				if(!emptyValidate(records)){
					event.halt();
					showError('渠道名称不能为空');
					return;
				}
				
				for(var i=0, count = records.length; i< count; i++){
					var record = records[i];
					if(!repeatValidate(record,records)){
						event.halt();
						showError('渠道名称：【'+record[nameFiled]+'】重复');
						return;
					}
				}
				
				S.one('#channelInfo').val(S.JSON.stringify(records));
			});
			
		});
	</script>
</body>
</html>